/**
* 基础弹窗组件，使用： this.$store.dispatch('setModal',{visible:true，modalId:'modlaId'}); 注意this指向的上下文环境，有时候是写self 或其他
*/
<template>
  <transition name="slide-fade">
    <div v-if="modal.visible && modal.modalId == 'baseModal'" class="modal" tabindex="-1" :id="modal.modalId" @click.stop.prevent="modalHide">
      <div class="modal-dialog" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click="modalHide">
          <div class="title">弹窗标题</div>
          <div class="wrapper">
            <div class="form-group">
              <p>弹窗文本</p>
            </div>
            <button type="button" class="btn btn-confirm btn-lg" @click="btnSure">确认</button>
            <button type="button" class="btn btn-lg btn-reject" @click="btnCancel">取消</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import store from 'store/store'

  export default {
    data () {
      return {}
    },
    computed: {
      modal() {
        return store.state.modal
      }
    },
    methods: {
      modalHide () {
        this.$store.dispatch('setModal', {visible: false, modalId: ''});
      },
      btnSure () {
        this.modalHide()
      },
      btnCancel () {
        this.modalHide()
      }
    },
    destroyed(){
      this.$store.dispatch('setModal', {visible: false, modalId: 'backdrop'});
    }
  }
</script>

<style scoped>
  /* 每个弹窗组件都写一遍这个样式 否则使用公共的会不流畅*/
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
</style>
